<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>天下行租车</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <link rel="stylesheet" href="css/base.css">
    <script src="js/txx.js" ></script>
</head>
<body>
<div id="app">
    <my-header></my-header>
    <main class="c900 el-card" style="align-items: stretch; width: 600px; padding: 30px 50px">
        <h2 style="text-align: center;margin-bottom: 50px">个人信息中心</h2>
        <el-row>
            <el-col :span="9" :offset="1">
                <el-avatar shape="square" :size="160" fit="fit" :src="newUser.headimg"></el-avatar>
                <div>
                    <el-upload action="txx/user/upload" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <el-button size="mini">上传头像</el-button>
                    </el-upload>

                    <el-button v-if="oldImg" @click="into" size="mini">还原</el-button>
                </div>
            </el-col>
            <el-col :span="13">
                <el-form ref="form" label-width="80px">
                    <el-form-item label="账号">
                        <el-input v-model="newUser.ename" disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="昵称">
                        <el-input v-model="newUser.cname"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱">
                        <el-input v-model="newUser.eamil"></el-input>

                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="save">保存</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </main>
</div>
<script>
    var v = new Vue({
        el: "#app",
        data:{
            id:'',
            oldImg:false,
            oldUser:'',
            newUser:'',
            errors:{cname:'',eamil:'',headimg:''},

        },
        created(){
            this.id = location.search.replace("?id=","");
            this.findById();
        },
        methods:{
            findById(){
                axios.post("txx/user/findById?id="+this.id).then(res=>{
                    if(res.data.code == 1){
                        this.oldUser = res.data.data;
                        this.newUser = JSON.parse(JSON.stringify(res.data.data));
                    }
                })
            },
            into(){
                this.newUser.headimg = this.oldUser.headimg;
                this.oldImg = false;
            },
            handleAvatarSuccess(res, file) {
                // this.imageUrl = URL.createObjectURL(file.raw);
                // res 是服务器返回的结果对象， 注意：相当于 axios 的 res.data
                let path = "upload/" + res.data;
                this.newUser.headimg = path;
                this.oldImg = true;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type.indexOf('image/') == 0;
                const isLt2M = file.size / 1024 / 1024 < 1;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 图片 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 1MB!');
                }
                return isJPG && isLt2M;
            },
            save(){
                this.oldImg = false;

                if(this.oldUser.cname === this.newUser.cname && this.oldUser.eamil === this.newUser.eamil && this.oldUser.headimg === this.newUser.headimg){
                    location.href="index.html";
                    return;
                }

                let p = new URLSearchParams();
                p.append("id",this.newUser.id);
                p.append("cname",this.newUser.cname);
                p.append("eamil",this.newUser.eamil);
                p.append("headimg",this.newUser.headimg);

                axios.post("txx/user/update",p).then(res=>{
                    if(res.data.code == 1){
                        this.$message(res.data.msg);
                        location.href="index.html";
                    }else{
                        this.$alert(res.data.msg);
                    }
                });
            }
        }
    })
</script>
</body>
</html>
<style>
    .el-form-item .el-form-item {
        margin-bottom: 22px
    }
</style>
